import React, { Component, useState } from 'react';
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import { history } from 'umi';

export default function() {
  const [searchVal, setSearchVal] = useState('');

  let onChange = (value: string) => {
    setSearchVal(value);
  };

  return (
    <div>
      <NavBar
        mode="light"
        icon={<Icon type="left" />}
        onLeftClick={() => {
          history.goBack();
        }}
      >
        搜索
      </NavBar>

      <SearchBar
        placeholder="请输入搜索的内容"
        value={searchVal}
        onSubmit={value => console.log(value, 'onSubmit')}
        onClear={value => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onCancel={() => console.log('onCancel')}
        showCancelButton
        onChange={onChange}
      />
    </div>
  );
}
